<template>
  <div id="violationList" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">违章管理</BreadcrumbItem>
				<BreadcrumbItem to="/violation/list">违章清单</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch :row="3" :open="true">
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="机构">
              <Select v-model="orgIds" placeholder="请选择" clearable :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="车牌">
              <VehicleComplete v-model="searchForm.vehicleIds"></VehicleComplete>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="司机">
              <DriverComplete v-model="searchForm.driverIds" clearable :multiple="true" ref="driverSel"></DriverComplete>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="日期">
              <DatePicker v-model="dateRnage" type="daterange" format="yyyy/MM/dd" placement="bottom-end" :options="dateOptions" :clearable="false" placeholder="请选择"></DatePicker>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="状态">
              <Select v-model="searchForm.handled" placeholder="请选择" clearable>
                <Option :value="1">已处理</Option>
                <Option :value="0">未处理</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
      <div class="table">
        <table>
          <thead>
            <th>机构</th>
            <th>车牌</th>
            <th width="25%">违章地点</th>
            <th>违章时间</th>
            <th width="20%">违章原因</th>
            <th>城市</th>
            <th width="140">司机</th>
            <th>扣分</th>
            <th>罚金</th>
            <th>处理状态</th>
          </thead>
          <tbody>
            <tr v-for="(v,i) in pageData.thisPageElements" :key="`violation-list-${v.vehicleId}-${v.date}`">
              <td>{{v.orgName||'--'}}</td>
              <td>{{v.plateNumber}}</td>
              <td>{{v.area||'--'}}</td>
              <td>{{moment(v.date).format('YYYY-MM-DD HH:mm:ss')}}</td>
              <td :title="v.act">{{(v.act||'').length > 10 ? `${v.act.substring(0,10)}...`:v.act}}</td>
              <td>{{v.wzcity||'--'}}</td>
              <td>
                <DriverComplete v-if="!v.isConfirmWz" v-model="v.driverId" :orgid="v.orgId" @on-init="(target) => initDrivier(v,target)" @on-change="(item) => changeDriver(v,item)" style="width:130px;"></DriverComplete>
                <template v-else>{{v.driverName}}</template>
                <Button v-if="!v.isConfirmWz && v.driverId" type="primary" :key="`button-key-${i}`" @click="bottonChangeDriver(i,v)">确定</Button>
              </td>
              <td>{{v.fen}}</td>
              <td>{{v.money}}</td>
              <td :class="{'error':v.handled===0}">{{v.handled===null?'未知':(v.handled===0?'未处理':'已处理')}}</td>
            </tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="10">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <Page :total="pageData.totalNumberOfElements" :page-size="pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
    </div>

  </div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import {download}  					 from '@/util/request'

  const MFT = 'YYYY-MM-DD';
  export default {
    data(){
      return {
        current:1,
        pageSize:15,
        orgIds:[],
        dateRnage:[moment(moment().format(MFT)).subtract(30,'d').toDate(),moment(moment().format(MFT)).subtract(0,'d').toDate()],
        searchForm:{vehicleIds:[],driverIds:[],handled:null},
        submitForm:{},
        dateOptions:{
          disabledDate:(d) => {
            let today = moment(moment().format(MFT)).toDate();
            return d > today;
          }
        }
      };
    },
    computed:{
      ...mapState('violation/violationList',['pageData','isLoading'])
    },
    methods:{
      moment,
      ...mapActions('violation/violationList',['reload','doConfirm']),
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,pageSize:this.pageSize,...this.submitForm});
      },
      search(){
        let [sTime,eTime] = [...this.dateRnage];
        this.submitForm = {...this.searchForm};
        this.submitForm.sTime = sTime ? moment(sTime).format('YYYY-MM-DD') : '';
        this.submitForm.eTime = eTime ? moment(eTime).format('YYYY-MM-DD') : '';
        this.submitForm.orgIds = this.orgIds.join(',');
        this.loadPage(1);
      },
      initDrivier(v,target){
        if (v.driverId) target.setOptions({value:v.driverId,label:v.driverName});
      },
      changeDriver(v,item){
        if (!item) return;
        v.driverItem = item;
        this.$Modal.confirm({
          title:'确认违章',
          content: `是否确定违章司机改为【${item.label}】？【确定】后，违章司机将不能再进行修改！`,
          loading:true,
          onOk:async () => {
            let data = {vehicleId:v.vehicleId,date:moment(v.date).format('YYYY-MM-DD HH:mm:ss'),driverId:item.value,driverName:item.label};
            let res = await this.doConfirm(data);
            this.$Modal.remove();
            if (res.sta === 200) {
              v.isConfirmWz = 1;
              v.driverName = item.label;
              this.$Message.success('操作成功');
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
      },
      bottonChangeDriver(i,v){
        let item = v.driverItem || {value:v.driverId,label:v.driverName};
        this.$Modal.confirm({
          title:'确认违章',
          content: `是否确定违章司机改为【${item.label}】？【确定】后，违章司机将不能再进行修改！`,
          loading:true,
          onOk:async () => {
            let data = {vehicleId:v.vehicleId,date:moment(v.date).format('YYYY-MM-DD HH:mm:ss'),driverId:item.value,driverName:item.label};
            let res = await this.doConfirm(data);
            this.$Modal.remove();
            if (res.sta === 200) {
              v.isConfirmWz = 1;
              v.driverName = item.label;
              this.$Message.success('操作成功');
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
      },
      exportData(){
        download('/wz/export',this.submitForm);
      }
    },
    mounted(){
      let query = this.$route.query;
      if (query.orgIds) this.orgIds = [query.orgIds];
      if (query.driverId) {
        this.searchForm.driverIds = [query.driverId];
        this.$refs.driverSel.setOptions({value:query.driverId,label:query.driverName});
      }
      this.search();
    }
  }
</script>

<style lang="less" scoped>
  .error{color: red;}
</style>
